import { Module } from "vuex";

interface AppState {
  sidebar: {
    opened: boolean;
    withoutAnimation: boolean;
  };
  device: "desktop" | "mobile";
  language: string;
  theme: "light" | "dark";
  loading: boolean;
}

const appModule: Module<AppState, Record<string, unknown>> = {
  namespaced: true,

  state: {
    sidebar: {
      opened: true,
      withoutAnimation: false,
    },
    device: "desktop",
    language: "zh-CN",
    theme: "light",
    loading: false,
  },

  getters: {
    sidebar: state => state.sidebar,
    device: state => state.device,
    language: state => state.language,
    theme: state => state.theme,
    loading: state => state.loading,
  },

  mutations: {
    TOGGLE_SIDEBAR(state) {
      state.sidebar.opened = !state.sidebar.opened;
      state.sidebar.withoutAnimation = false;
    },

    CLOSE_SIDEBAR(state, withoutAnimation: boolean) {
      state.sidebar.opened = false;
      state.sidebar.withoutAnimation = withoutAnimation;
    },

    TOGGLE_DEVICE(state, device: "desktop" | "mobile") {
      state.device = device;
    },

    SET_LANGUAGE(state, language: string) {
      state.language = language;
    },

    SET_THEME(state, theme: "light" | "dark") {
      state.theme = theme;
    },

    SET_LOADING(state, loading: boolean) {
      state.loading = loading;
    },
  },

  actions: {
    toggleSideBar({ commit }) {
      commit("TOGGLE_SIDEBAR");
    },

    closeSideBar({ commit }, withoutAnimation: boolean) {
      commit("CLOSE_SIDEBAR", withoutAnimation);
    },

    toggleDevice({ commit }, device: "desktop" | "mobile") {
      commit("TOGGLE_DEVICE", device);
    },

    setLanguage({ commit }, language: string) {
      commit("SET_LANGUAGE", language);
    },

    setTheme({ commit }, theme: "light" | "dark") {
      commit("SET_THEME", theme);
    },

    setLoading({ commit }, loading: boolean) {
      commit("SET_LOADING", loading);
    },
  },
};

export default appModule;
